<template>
	<view class="page">
		<view class="header" :style="diap.style">
			<view class="title_box flex">
				<view class="left_icon flex">
					<u-icon color="#ffffff" name="arrow-left" size="40" @click="back"></u-icon>
				</view>
				<view class="title">产品名称</view>
				<view class="icon_r">
					<image class="msg" src="/static/icon/shenqing.png" mode="scaleToFill" />
					<text class="little">申请信息</text>
				</view>
			</view>
		</view>
		<view class="top_bg"></view>
		<view class="content">
			<view class="top">
				<view class="top_one">
					<view class="one_left">
						<h1>借多少</h1>
						<text>最高可借</text>
						<text>{{ maxMoney }}</text>
					</view>
					<view class="one_right">
						<h1>借多久</h1>
						<text>最长可借24个月</text>
					</view>
				</view>
				<view class="top_line"></view>
				<view class="top_two">
					<view class="two_left">
						<text class="fuhao">&yen;</text>
						<input type="number" :focus="focus1" maxlength="6" v-model="money" @blur="moneyLimit" />
						<image src="/static/icon/BiHui.png" @click="changeMoney" />
					</view>
					<view class="two_right">
						<input type="number" v-model="month" maxlength="2" :focus="focus2" @blur="monthLimit" />
						<image src="/static/icon/BiHui.png" @click="changeMonth" />
					</view>
				</view>
				<view class="top_line"></view>
				<view class="top_last">
					<text>*预估金额仅根据等额本息计算*</text>
					<view class="last_bot">
						<view>
							<h1>预估月均还款(元)</h1>
							<text>1682.32</text>
						</view>
						<view>
							<h1>预计下款时间</h1>
							<text>1天</text>
						</view>
						<view>
							<h1>参考月利率</h1>
							<text>0.34%</text>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 产品大数据 -->
			<view class="bigData">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>产品大数据</text>
				</view>
				<view class="data_main">
					<view>
						<h1>申请人数</h1>
						<text>8798人</text>
					</view>
					<view>
						<h1>放款速度</h1>
						<text>1天</text>
					</view>
					<view>
						<h1>平均额度</h1>
						<text>12万</text>
					</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 申请要求 -->
			<view class="introduce">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>申请要求</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view v-for="item in 3" :key="item">后台填写，关于产品的描述信息。</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 机构信息 -->
			<view class="condition">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>机构信息</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view>所在公司：咚吧啦吧啦巴拉啦</view>
					<view>公司地址：抵拢倒拐大厦</view>
					<view>业务范围：车抵贷、房抵贷</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 申请流程 -->
			<view class="flow">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>申请流程</text>
				</view>
				<view class="long_line"></view>
				<view class="color_line"></view>
				<view class="flow_content">
					<view class="flow_box">
						<view class="circle">
							<image src="/static/icon/tianxiebai.png" mode="scaleToFill" />
						</view>
						<text>申请贷款</text>
					</view>
					<view class="flow_box">
						<view class="circle">
							<image src="/static/icon/phone.png" mode="scaleToFill" />
						</view>
						<text>电话初审</text>
					</view>
					<view class="flow_box">
						<view class="circle">
							<image src="/static/icon/kefu.png" mode="scaleToFill" />
						</view>
						<text>人工助贷</text>
					</view>
					<view class="flow_box">
						<view class="circle">
							<image src="/static/icon/shenpi.png" mode="scaleToFill" />
						</view>
						<text>审批放款</text>
					</view>
				</view>
			</view>
			<u-gap height="24" bgColor="#F5F6FA"></u-gap>
			<!-- 温馨提示 -->
			<view class="remind">
				<view class="main_top">
					<view class="blue_line"></view>
					<text>温馨提示</text>
				</view>
				<view class="long_line"></view>
				<view class="main_text">
					<view class="little_text">产品下款前不收取费用，请警惕添加QQ、索要验证码等行为</view>
				</view>
			</view>
			<!-- 选择框 -->
			<view class="check animation" :class="'animation-' + animation">
				<u-checkbox-group>
					<u-checkbox v-model="checked" icon-size="24rpx" active-color="#3478F2" shape="circle">已经阅读并同意</u-checkbox>
				</u-checkbox-group>
				<text>《贷款知情书》</text>
			</view>
			<view class="bottom_line"></view>

			<!-- 按钮 -->
			<view class="btn headle" @click="next">立即申请</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false,
			animation: '',
			maxMoney: 200000,
			maxMonth: 60,
			pageScrollTop: 0, // 页面滚动距
			month: 12, //贷款期限
			money: 50000, //贷款金额
			focus1: false,
			focus2: false
		}
	},
	components: {},
	computed: {
		diap() {
			let val = this.pageScrollTop / 45
			return {
				style: `background-color: rgba(52,120,242,${val >= 1 ? 1 : val});`
			}
		}
	},
	onLoad() {
		// uni.removeStorageSync('token')
		// const token = uni.getStorageSync('token')
		// if (!token) {
		// 	uni.reLaunch({
		// 		url: '/pages/login/login'
		// 	})
		// }
	},
	// 页面滚动监听
	onPageScroll(e) {
		this.pageScrollTop = Math.floor(e.scrollTop)
	},
	methods: {
		back() {
			uni.navigateBack()
		},
		changeMoney() {
			this.focus1 = true
		},
		changeMonth() {
			this.focus2 = true
		},
		// 跳转
		next() {
			if (!this.checked) {
				// 手机震动
				uni.vibrateLong({
					success: function () {
						uni.showToast({
							title: '请阅读并同意贷款知情书',
							icon: 'none'
						})
					}
				})
				// 文字抖动
				this.animation = 'shake'
				setTimeout(() => {
					this.animation = ''
				}, 800)
				return
			}
			uni.navigateTo({
				url: '/pages/auth/demand'
			})
			// uni.navigateTo({
			// 	url: '/pages/home/homeSuccee'
			// })
		},
		// 金额限制
		moneyLimit() {
			if (this.money < 1000) {
				this.money = 1000
				return
			}
			if (this.money > this.maxMoney) {
				this.money = this.maxMoney
				return
			}
		},
		monthLimit() {
			if (this.month < 1) {
				this.month = 1
				return
			}
			if (this.month > this.maxMonth) {
				this.month = this.maxMonth
				return
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #f5f6fa;
}
.animation-shake {
	animation: shake 0.3s !important;
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	10% {
		transform: translateX(-9px);
	}

	20% {
		transform: translateX(8px);
	}

	30% {
		transform: translateX(-7px);
	}

	40% {
		transform: translateX(6px);
	}

	50% {
		transform: translateX(-5px);
	}

	60% {
		transform: translateX(4px);
	}

	70% {
		transform: translateX(-3px);
	}

	80% {
		transform: translateX(2px);
	}

	90% {
		transform: translateX(-1px);
	}
}
.content {
	padding: 0 32rpx;
	position: relative;
	top: -164rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #696969;
	.blue_line {
		width: 4rpx;
		height: 28rpx;
		background: #3478f2;
		border-radius: 2rpx;
		margin-right: 18rpx;
	}
	.long_line {
		width: 638rpx;
		height: 2rpx;
		background: #f3f3f3;
		margin-top: 16rpx;
	}
	.color_line {
		margin: 0 auto;
		width: 560rpx;
		height: 8rpx;
		background: #e5eeff;
		margin-top: 60rpx;
	}
	.main_text {
		margin-top: 22rpx;
		line-height: 36rpx;
		letter-spacing: 2rpx;
	}
	.little_text {
		letter-spacing: 0rpx;
	}
	.main_top {
		display: flex;
		height: 44rpx;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		letter-spacing: 2rpx;
	}
	// 产品详情样式
	.top {
		width: 686rpx;
		height: 456rpx;
		background: #ffffff;
		border-radius: 16rpx;
		border: 2rpx solid #dddcde;
		box-sizing: border-box;
		.top_one {
			display: flex;
			height: 132rpx;
			.one_left {
				height: 132rpx;
				width: 344rpx;
				border-right: 2rpx solid #dddcde;
				padding-top: 26rpx;
				text-align: center;
			}
			.one_right {
				text-align: center;
				padding-top: 26rpx;
				height: 132rpx;
				width: 340rpx;
			}
			h1 {
				margin: 0 auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 4rpx;
			}
			text {
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #969799;
			}
		}
		.top_line {
			left: 0;
			width: 100%;
			height: 2rpx;
			background: #e4e4e4;
		}
		.top_two {
			height: 128rpx;
			line-height: 128rpx;
			display: flex;
			align-items: center;
			input {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3478f2;
				width: 200rpx;
				display: inline-block;
				margin-top: 38rpx;
			}
			.two_left {
				height: 128rpx;
				width: 344rpx;
				border-right: 2rpx solid #dddcde;
				text-align: center;
				position: relative;
				.fuhao {
					position: absolute;
					width: 40rpx;
					height: 56rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					top: 4rpx;
					left: 64rpx;
				}
				image {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					right: 20rpx;
					top: 40rpx;
				}
			}
			.two_right {
				height: 128rpx;
				width: 340rpx;
				text-align: center;
				position: relative;
				image {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					right: 24rpx;
					top: 45rpx;
				}
			}
		}
		.top_last {
			height: 192rpx;
			text-align: center;
			padding-top: 24rpx;
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #d4d4d4;
			}
			.last_bot {
				display: flex;
				justify-content: space-between;
				padding: 22rpx 24rpx 20rpx 24rpx;
				h1 {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					font-family: PingFang SC;
					margin-bottom: 10rpx;
				}
				text {
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #fc1f1f;
					font-family: PingFang SC;
				}
			}
		}
	}
	// 产品大数据
	.bigData {
		width: 686rpx;
		height: 244rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		font-family: PingFang SC;
		.data_main {
			display: flex;
			justify-content: space-between;
			text-align: center;
			margin-top: 32rpx;
			padding-left: 42rpx;
			padding-right: 42rpx;
			h1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 34rpx;
			}
			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	// 申请要求
	.introduce {
		width: 686rpx;
		height: 236rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	// 申请条件
	.condition {
		width: 686rpx;
		height: 236rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 18rpx 24rpx 20rpx 24rpx;
	}
	//申请流程
	.flow {
		width: 686rpx;
		height: 254rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 18rpx 24rpx 20rpx 24rpx;
		position: relative;
		.flow_content {
			width: 614rpx;
			position: absolute;
			display: flex;
			justify-content: space-between;
			top: 100rpx;
			.flow_box {
				width: 120rpx;
				.circle {
					margin: 0 auto;
					width: 88rpx;
					height: 88rpx;
					background: #3478f2;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 8rpx;
					image {
						width: 52rpx;
						height: 52rpx;
					}
				}
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #969799;
					letter-spacing: 1rpx;
				}
			}
		}
	}
	// 温馨提示
	.remind {
		width: 686rpx;
		height: 156rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 18rpx 22rpx 20rpx 22rpx;
	}
	//选择框
	.check {
		letter-spacing: 1rpx;
		margin: 0 auto;
		text-align: center;
		margin-top: 60rpx;
		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3478f2;
		}
	}
	::v-deep .u-checkbox__icon-wrap--checked[data-v-532d01c7] {
		height: 24rpx;
		width: 24rpx;
	}
	::v-deep .u-checkbox__label[data-v-532d01c7] {
		margin-right: 0;
	}
	// 按钮
	.btn {
		width: 688rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
		border-radius: 70rpx;
		margin: 0 auto;
		line-height: 92rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		margin-top: 38rpx;
		letter-spacing: 1rpx;
	}
	.bottom_line {
		width: 686rpx;
		height: 2rpx;
		background: #e4e4e4;
		margin-top: 38rpx;
	}
}
.flex {
	display: flex;
	align-items: center;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding-top: var(--status-bar-height);
	z-index: 10;
	background-color: #0481fe;
	color: rgba(255, 255, 255, 0.8);
	.title_box {
		height: 88rpx;
		padding: 0 32rpx;
		justify-content: space-between;
		position: relative;
		.title {
			width: 170rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			left: 258rpx;
		}
		.icon_r {
			height: 44rpx;
			display: flex;
			align-items: center;
			.msg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
			.little {
				width: 126rpx;
				height: 40rpx;
			}
		}
	}
}
.top_bg {
	height: 380rpx;
	background: linear-gradient(180deg, #0481fe 0%, #b6e9ff 100%);
}
</style>
